import React, { useState } from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Input } from 'antd-mobile'
type Props = {}

const Index = (props: Props) => {
    const [value, setValue] = useState('')
    const navigate = useNavigate();

    const back = () => {
        navigate('/home')
    }

    return (
        <div>
            <NavBar onBack={back} />
            <div className="wz">
                <h1>选择你的位置</h1>
                <p>我们会根据你选择的位置，推荐当地热门的展馆活动</p>
            </div>
            <div className="search">
                <Input
                    placeholder='搜索'
                    value={value}
                    onChange={val => {
                        setValue(val)
                    }}
                />
                <button onClick={() => navigate('/home')}>使用我当前的位置</button>
            </div>
            <div className="rm">
                <h3>热门位置</h3>
                <div onClick={() => navigate('/home')}>
                    <h3>杭州市</h3>
                    <p>浙江省，杭州市</p>
                </div>
                <div>
                    <h3>上海市</h3>
                    <p>上海市</p>
                </div>
                <div>
                    <h3>北京市</h3>
                    <p>北京市</p>
                </div>

            </div>
        </div>
    )
}

export default Index